import React, { Component, useRef } from 'react'
import { Form, Input, Space, Button, Collapse } from 'antd'
import { SearchOutlined } from "@ant-design/icons";
import GoBack from '@/components/TheGoBack'
import _ from 'lodash'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import '../style/style.less'
import { apimemberBalancePage, apimemberCartPage } from '@/request/cashier';
import { phoneReg } from '@/utils/regexp'
const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    Object.keys(values).forEach(key => {
      if (!values[key]) {
        delete values[key]
      }
    })
    getValue(values)
  }

  const reset = () => {
    formRef.current.setFieldsValue({
      nickName: '',
      memberMobile: ''
    })
    getValue({})
  }
  return <Form layout={'inline'} onFinish={onFinish} ref={formRef} >
    <Form.Item name="nickName">
      <Input suffix={<SearchOutlined />} placeholder="用户名" />
    </Form.Item>
    <Form.Item name={'memberMobile'}>
      <Input suffix={<SearchOutlined />} placeholder="手机号码" />
    </Form.Item>
    <Form.Item>
      <Space>
        <Button type='primary' htmlType='submit'>搜索</Button>
        <Button onClick={reset}>重置</Button>
      </Space>
    </Form.Item>
  </Form>
}
const { Panel } = Collapse;
export default class MembersList extends Component {
  state = {
    columns: [
      {
        title: '手机号码',
        dataIndex: 'memberMobile',
        key: 'memberMobile'
      },
      {
        title: '用户名',
        dataIndex: 'nickName',
        key: 'nickName',
        render: (text, record) => {
          return text || '无'
        }
      },
      {
        title: '消费前余额',
        dataIndex: 'beforeChangeBalance',
        key: 'beforeChangeBalance',
        render: (text, record) => {
          return <React.$Price price={text} />
        }
      },
      {
        title: '金额',
        dataIndex: 'changeTotal',
        key: 'changeTotal',
        render: (text, record) => {
          return <div>{record.changeType === 0 ? '+' : '-'}<React.$Price price={text} /></div>
        }
      },
      {
        title: '消费后余额',
        dataIndex: 'afterChangeBalance',
        key: 'afterChangeBalance',
        render: (text, record) => {
          return <React.$Price price={text} />
        }
      },
      {
        title: '其他',
        dataIndex: 'couponInfoList',
        key: 'couponInfoList',
        render: (text, record) => {
          let header = ""
          let panel = []
          if (text && text.length > 1) {
            header = (record.changeType === 0 ? '+' : '-') + record.couponInfoList[0].couponTitle + "X" + record.couponInfoList[0].count + "..."
            let couponList = JSON.parse(JSON.stringify(record.couponInfoList))
            couponList.splice(0,1)
            panel = couponList
          } else if(text && text.length === 1) {
            header = (record.changeType === 0 ? '+' : '-') + record.couponInfoList[0].couponTitle + "X" + record.couponInfoList[0].count
          }else {
            header = ""
          }

          return (text && text.length > 1 ? <Collapse ghost={true} >
            <Panel showArrow={false} header={header} >
              {panel.map(v=>{
                return (record.changeType === 0 ? '+' : '-') + v.couponTitle + "X" + v.count + '\n\r'
              })}
            </Panel>
          </Collapse>
            : <div>{header}</div>
          )
          // return <div>
          //   {
          //     (text && text.length === 1) ? <div>{record.changeType === 0 ?'+':'-'}{ record.couponInfoList[0].couponTitle + "X" + record.couponInfoList[0].count}</div> 
          //     : text && text.length > 1 ?  <div onClick={()=>{  }}>{record.changeType === 0 ?'+':'-'}{ record.couponInfoList[0].couponTitle + "X" + record.couponInfoList[0].count + "..."}</div>  
          //     //: <div onClick={()=>{ }}>
          //     //   {text.map(v=>{
          //     //     return v.couponTitle + "X" +v.count
          //     //   })}
          //     // </div>
          //      : null
          //   }
          // </div>
        }
      },
      {
        title: '操作',
        fixed: 'right',
        render: (text, record) => {
          return <>
            <TheButton onClick={() => {
              if (record.storeType === 0) {
                this.props.history.push(`/cashier/order/details/${record.orderId}`)
              } else {
                this.props.history.push(`/hotelOrder/list/${record.orderId}`)
              }
            }}>查看消费明细</TheButton>
          </>
        }
      },
    ],
    dataSource: [

    ],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    let { pageData, searchValue } = this.state
    const { memberId } = this.props.match.params
    await apimemberBalancePage({ ...pageData, ...searchValue, memberId }).then(res => {
      if (res.data && res.code === 0) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount
        })
      }
    })
    this.setState({ loading: false })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  getValue = value => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }



  render() {
    const { columns, dataSource, loading, pageData: { pageSize, pageNo }, total, } = this.state
    return (
      <div className='p-layout-box'>
        {/* <SearchHeader getValue={this.getValue} /> */}
        <GoBack history={this.props.history} title={"流水记录"} />
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} scroll={{ x: "max-content", y: '63vh' }} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    )
  }
}
